<template>
  <div class="tag">
    <el-row>
      <el-col :span="6" class="hidden-sm-and-down" id="side" style="margin-top: 0px">
        <el-button type="primary" v-show="!isLogin" @click="Publish" style="width: 300px">发布论坛</el-button>
      </el-col>
    </el-row>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="d-flex align-items-center">
        <img class="card-icon" src="../../assets/classification.png" />
        <span style="margin-right: 80px">分类</span>
        <el-button style="float: right; padding: 3px 0" type="text">more<i class="el-icon-d-arrow-right"></i></el-button>
      </div>
      <div v-for="(item, key) in AllTypes" :key="key">
        <div style="display: flex">
          <el-link style="display: table;font-weight: bold;font-size: 15px;width: 60px">{{item.type}}</el-link>
          <span style="margin-left:160px">{{key}}篇</span>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="d-flex align-items-center">
        <img class="card-icon" src="../../assets/tag.png" />
        <span style="margin-right: 80px">标签</span>
        <el-button style="float: right; padding: 3px 0" type="text">more<i class="el-icon-d-arrow-right"></i></el-button>
      </div>
      <div class="text item">
        <el-tag :size="TagSize[key%4]" class="tag-item" v-for="(item, key) in AllTags" :key="key">{{item.tag}}</el-tag>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="d-flex align-items-center">
        <img class="card-icon" src="../../assets/archive.png" />
        <span style="margin-right: 80px">归档</span>
        <el-button style="float: right; padding: 3px 0" type="text">more<i class="el-icon-d-arrow-right"></i></el-button>
      </div>
      <div style="display: flex">
        <el-link style="display: table;font-weight: bold;font-size: 15px;margin-right:150px">2020-02</el-link>
        <span>20篇</span>
      </div>
      <div style="display: flex">
        <el-link style="display: table;font-weight: bold;font-size: 15px;margin-right:150px">2020-03</el-link>
        <span>60篇</span>
      </div>
      <div style="display: flex">
        <el-link style="display: table;font-weight: bold;font-size: 15px;margin-right:150px">2020-04</el-link>
        <span>100篇</span>
      </div>
      <div style="display: flex">
        <el-link style="display: table;font-weight: bold;font-size: 15px;margin-right:150px">2020-05</el-link>
        <span>20篇</span>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="d-flex align-items-center">
        <img class="card-icon" src="../../assets/time.png" />
        <span style="margin-right: 80px">最新论坛</span>
        <el-button style="float: right; padding: 3px 0" type="text">more<i class="el-icon-d-arrow-right"></i></el-button>
      </div>
      <div v-for="(item,key) in Forums" :key="key">
        <div style="display: flex">
          <el-link style="display: table;font-weight: bold;font-size: 15px;">
            <router-link :to="'/forumDetails/'+item.id" tag="span" class="art-title">{{item.title}}</router-link>
          </el-link>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      AllTags: [],
      AllTypes: [],
      Forums: [],
      TagSize: ['success', 'info', 'warning', 'danger'],
      isLogin: window.sessionStorage.getItem('username') === null
    }
  },
  methods: {
    Publish () {
      this.$router.push('/postarticle')
    },
    getAllTypes () {
      this.$axios.get('other_forum/types').then(response => {
        console.log(response.data)
        this.$set(this, 'AllTypes', response.data.data)
      }).catch(error => {
        console.log(error)
      })
    },
    getAllTags () {
      this.$axios.get('forum/getAllTags').then(response => {
        console.log(response.data)
        this.$set(this, 'AllTags', response.data.data)
      }).catch(error => {
        console.log(error)
      })
    },
    getNewForums () {
      this.$axios.get('other_forum/forum').then(response => {
        console.log(response.data)
        this.$set(this, 'Forums', response.data.data)
      }).catch(error => {
        console.log(error)
      })
    }
  },
  mounted () {
    this.getAllTags()
    this.getAllTypes()
    this.getNewForums()
  }
}
</script>

<style lang="less" scoped>
.box-card{
  width: 300px;
}
.box-card .item:hover {
  color: #409EFF;
  cursor: pointer;
}
.box-card span {
  font-weight: bold;
}
.card-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.tag-item {
  margin-right: 10px;
}
</style>
